
function jsProgressBar()
{
	//progress location (absolute,percent)
	this.progress = [0,0];
	//parent object
	this.parentObj = null;
	//canvas object
	this.obj = null;
	//current mouse state for the progress bar (initialize to 0)
	this.mouseState = [0, 0, 0, 0, 0, 0, 0, 0, 0];
	//mouse currently over the pb?
	this.mouseOn = false;	
	//width
	this.width = 0;
	//mouse_out height
	this.out_height = 0;
	//mouse_over height
	this.over_height =0;
	//current height
	this.current_height = 0;
	//text draw style
	//0-none,1-static center,2-dynamic
	this.text_mode = 0;
	//text font
	this.text_font = "sans-serif";
	
	//background style
	this.bgStyle = null;
	//foreground style
	this.fgStyle = null;
	
	this.textFillStyle = null;
	
	this.textStrokeStyle = null;
	
	this.id = null;
	
	this.type = "jsProgressBar";
	//context
	this.ctx = null;
	////******functions******
	jsProgressBar.prototype.getProgress = _pb_getProgress;
	jsProgressBar.prototype.setProgress = _pb_setProgress;
	jsProgressBar.prototype.setProgressNC = _pb_setProgressNC;
	//initialize function
	jsProgressBar.prototype.init = _pb_init;
	//draw function
	jsProgressBar.prototype.draw = _pb_draw;
	//mouse move event
    jsProgressBar.prototype.mouse_move = _pb_mouse_move;
	//mouse down event
	jsProgressBar.prototype.mouse_down = _pb_mouse_down;
	//mouse out event
	jsProgressBar.prototype.mouse_out = _pb_mouse_out;
	//mouse up event
	jsProgressBar.prototype.mouse_up = _pb_mouse_up;
	//mouse over event
	jsProgressBar.prototype.mouse_over = _pb_mouse_over;
	//set the current height of the progress bar efficiently
	jsProgressBar.prototype.setHeight = _pb_setHeight;

	jsProgressBar.prototype.getContext = _pb_getContext;
	
	////********Event Handlers to be set
	this.progress_changed = null;
	
} 
  
//create an object dictionary of progress bars so that we can handle mouse events
jsProgressBar.dictObject = new jsObjectDictionary();

function _pb_init(_objParent, width, height, over_height, textMode, textFont, startValue)
	{
		this.parentObj = _objParent;
		//if that parent wasnt found, dont continue
		if(this.parentObj==null)
		{
			jsDebug.Throw(0,"No Parent Object Found");
			return;
		}
		//create canvas object
		this.obj = document.createElement('canvas');
		//add this progress bar to the dictionary so we can handle events
		jsProgressBar.dictObject.add(this.obj,this);
		//set it's id
		this.id = "jsProgressBar" + jsProgressBar.dictObject.count;
		this.obj.setAttribute('id','canvas_' + jsProgressBar.dictObject.count);
		this.obj.setAttribute('class','CProgressBar');
		//add canvas to parent
		this.parentObj.appendChild(this.obj);	
		//set the initial height of the progress bar
		this.current_height = this.out_height = this.obj.height = height;
		//set the width of the progress bar to the width of the object
		this.width = this.obj.width = width;
		//set the height of the progress bar when mousing over
		this.over_height = over_height;
		//set initial start value
		this.setProgress(null,(startValue/100));
		if(textMode){this.text_mode = textMode;}
		if(textFont){this.text_font = textFont;}
		//set the objects event handlers to their respective global functions
		this.obj.onmousemove = g_mouse_move;
		this.obj.onmousedown = g_mouse_down;
		this.obj.onmouseout = g_mouse_out;
		this.obj.onmouseup = g_mouse_up;
		this.obj.onmouseover = g_mouse_over;
		
		this.ctx = this.obj.getContext("2d");
		//initialize gradients
		this.bgStyle= this.ctx.createLinearGradient(0,0,0,(this.current_height/3));
		this.bgStyle.addColorStop(0,"#FFF");
		this.bgStyle.addColorStop(1,"#55F");
		
		this.fgStyle = this.ctx.createLinearGradient(0,((this.current_height*2)/3),0,this.current_height);
		this.fgStyle.addColorStop(1,"#FFF");
		this.fgStyle.addColorStop(0,"#0F0");
		
		this.textFillStyle = "rgb(0,0,0)";
		//draw the initial image of the progress bar
		this.draw();
	}
//draw our progress bar
function _pb_draw()
{
	jsDebug.Throw(this.id, 255,"Drawing");
	//set the objects height to the draw height
	this.obj.height = this.current_height;
	//dont need to draw the background if it will just be overwritten by the foreground
	if(this.getProgress()[1]!=1)
	{
		//set the fill style to the new gradient
		this.ctx.fillStyle = this.bgStyle;
		//draw the background
		this.ctx.fillRect(0,0,this.width,this.current_height);
	}
	//dont need to draw the foreground if we wont be drawing anything
	if(this.getProgress()[1]!=0)
	{
		this.ctx.fillStyle = this.fgStyle;
		//draw the foreground
		this.ctx.fillRect(0,0,this.getProgress()[0],this.current_height);
	}
	if(this.text_mode!=0)
	{
		this.ctx.font = this.current_height-4 + "px " + this.text_font;
		var dX = this.width/2;
		if(this.text_mode==1)
		{
			this.ctx.textAlign = "center";
		}else
		{
			drawWidth = this.ctx.measureText(Math.floor(this.getProgress()[1]*100) + "% ").width;
			if(drawWidth<this.getProgress()[0])
			{
				this.ctx.textAlign = "right";
			}else
			{
				this.ctx.textAlign = "left"
			}
			dX = this.getProgress()[0];
		}
		this.ctx.textBaseline = "middle"
		if(this.textStrokeStyle)
		{
			this.ctx.strokeStyle = this.textStrokeStyle;
			this.ctx.strokeText(Math.floor(this.getProgress()[1]*100) + "% ",dX,this.current_height/2);
		}
		if(this.textFillStyle)
		{
			this.ctx.fillStyle = this.textFillStyle;
			this.ctx.fillText(Math.floor(this.getProgress()[1]*100) + "% ",dX,this.current_height/2);		
		}
	}
}


//handle our mouse move event
function _pb_mouse_move(e)
{
	//if our left mouse button is down
	if(this.mouseState[0] && this.mouseOn)
	{
		//set the height to the over height
		this.setHeight(this.over_height,false);
		//set absolute and percent progress
		this.setProgress(e.clientX-jsElementProperties.getLeft(this.obj),0);
		
		//draw the progress bar
		this.draw();
	}else
	{
		//set the height to the out height
		this.setHeight(this.out_height,true);
	}
}

//handle our mouse down event
function _pb_mouse_down(e)
{
	//increment the mouse state for that button
	this.mouseState[e.button]=1;
	this.mouse_move(e);
}

//handle our mouse up event
function _pb_mouse_up(e)
{
	//decrement the mose state for that button
	this.mouseState[e.button]=0;
}

//handle our mouse out event
function _pb_mouse_out()
{
	//set the height to the out height
	this.setHeight(this.out_height,true);
	this.mouseOn = false;
	if(this.progress[1] == 1 || this.progress[1] == 0)
	{
		this.mouseState = [0, 0, 0, 0, 0, 0, 0, 0, 0];
	}
}

//handle our mouse over event
function _pb_mouse_over()
{
	this.mouseOn = true;
}

//when we set our height, make sure we only redraw once
function _pb_setHeight(y,bDraw)
{
	if(this.current_height == y){return;}
	this.current_height = y;
	if(bDraw)
	{
		this.draw();
	}
}

function _pb_getContext()
{
	return this.ctx;
}

function _pb_getProgress()
{
	return this.progress;
}

function _pb_setProgressNC(absolute,decimal)
{
	if(absolute)
	{
		this.progress[0] = absolute;
		this.progress[1] = absolute/this.width;
	}else if(decimal)
	{
		this.progress[1] = decimal;
		this.progress[0] = this.width*decimal;
	}
	if(this.progress[1]>.99)
	{
		this.progress[0] = this.width;
		this.progress[1] = 1;
	}else if(this.progress[1]<.01)
	{
		this.progress[0] = this.progress[1] = 0;
	}
}

function _pb_setProgress(absolute,decimal)
{
	if(absolute)
	{
		this.progress[0] = absolute;
		this.progress[1] = absolute/this.width;
	}else if(decimal)
	{
		this.progress[1] = decimal;
		this.progress[0] = this.width*decimal;
	}
	if(this.progress[1]>.99)
	{
		this.progress[0] = this.width;
		this.progress[1] = 1;
	}else if(this.progress[1]<.01)
	{
		this.progress[0] = this.progress[1] = 0;
	}
	jsDM.delta(this,"progress1",this.progress[1]);
	if(this.progress_changed)
	{
		this.progress_changed();
	}
}

//global event handler for mouse movement
function g_mouse_move(e)
{
	_canvas = (window.event) ? e.srcElement : e.target;
	//call object's version
	jsProgressBar.dictObject.getVal(_canvas).mouse_move(e);
}

//global event handler for mouse up
function g_mouse_up(e)
{
	_canvas = (window.event) ? e.srcElement : e.target;
	//call object's version
	jsProgressBar.dictObject.getVal(_canvas).mouse_up(e);
}

//global event handler for mouse down
function g_mouse_down(e)
{
	_canvas = (window.event) ? e.srcElement : e.target;
	//call object's version
	jsProgressBar.dictObject.getVal(_canvas).mouse_down(e);
}

//global event handler for mouse out
function g_mouse_out(e)
{
	_canvas = (window.event) ? e.srcElement : e.target;
	//call object's version
	jsProgressBar.dictObject.getVal(_canvas).mouse_out();
}

//global event handler for mouse over
function g_mouse_over(e)
{
	_canvas = (window.event) ? e.srcElement : e.target;
	//alert(jsProgressBar.dictObject.getVal(_canvas));
	//call object's version
	jsProgressBar.dictObject.getVal(_canvas).mouse_over();
}



